<template>
  <div class="setting-content inside-comment">
    <div class="setting-item" >
      <h2 class="setting-header">
        <strong>基本设置</strong>
      </h2>
      <el-form class="setting-form"  :model="system.basicSettings" label-width="100px"  size="large">
        <el-form-item label="系统名称" prop="systemName">
          <el-input placeholder="输入系统名称" v-model="system.basicSettings.systemName"></el-input>
        </el-form-item>
        <el-form-item label="官网地址" prop="officialWebsiteUrl">
          <el-input placeholder="输入官网地址" v-model="system.basicSettings.officialWebsiteUrl"></el-input>
        </el-form-item>
        <el-form-item label="LOGO" prop="logoUrl" >
          <div class="form-img" @click="handleUpload('logoUrl')">
            <div class="has-img" v-if="system.basicSettings.logoUrl">
              <img :src="system.basicSettings.logoUrl" alt="" />
              <span @click.stop="handleRemoveImg('thumb')">
                <el-icon><Delete /></el-icon>
              </span>
            </div>
            <el-icon v-else><Plus /></el-icon>
          </div>
        </el-form-item>
        <el-form-item label="版权信息" prop="copyrightInfo">
          <el-input placeholder="输入版权信息" v-model="system.basicSettings.copyrightInfo"></el-input>
        </el-form-item>
        <el-form-item label="ICP备案" prop="icpRecordNumber">
          <el-input placeholder="输入ICP备案" v-model="system.basicSettings.icpRecordNumber"></el-input>
          <el-input placeholder="输入链接" v-model="system.basicSettings.icpRecordUrl"></el-input>
        </el-form-item>
        <el-form-item label="公网安备" prop="beianRecordNumber">
          <el-input placeholder="输入公网安备" v-model="system.basicSettings.beianRecordNumber"></el-input>
          <el-input placeholder="输入链接" v-model="system.basicSettings.beianRecordUrl"></el-input>
        </el-form-item>
        <div class="fotter">
          <el-button type="primary" @click="FormSubmit" size="default">保存</el-button>
        </div>
      </el-form>
    </div>
    <div class="setting-item" >
      <h2 class="setting-header">
        <strong>功能设置</strong>
      </h2>
      <el-form class="setting-form" :model="system" label-width="140px"  size="large">
        <el-form-item label="绑定后查看招标详情">
          <div class="item-row">
            <el-switch v-model="system.needEnterprise" />
            <el-popover
              placement="top-start"
              :width="200"
              trigger="hover"
              content="用户需要绑定企业才能查看招标详情"
            >
              <template #reference>
                <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </el-form-item>
        <el-form-item label="前台公告时效">
          <el-switch v-model="system.useNoticeViewDuration" />
        </el-form-item>
        <el-form-item label="用户可查看公告时效" v-if="system.useNoticeViewDuration">
          <div class="item-row">
            <el-input-number v-model="system.noticeViewDuration" :min="1"  size="default" controls-position="right"/>
            <p>（天）</p>
            <el-popover
              placement="top-start"
              :width="200"
              trigger="hover"
              content="超出时效的公告将不会在前台显示"
            >
              <template #reference>
                <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </el-form-item>
        <el-form-item label="最大子账号数量">
          <div class="item-row">
            <el-input-number v-model="system.maxSubAccount" :min="1" :max="10" size="default" controls-position="right"/>
          </div>
        </el-form-item>
        <el-form-item label="公告类型定义">
          <!-- <el-input v-model="system.noticeType" /> -->
          <div class="notice-type">
            <el-input v-for="(item,index) in system.noticeType" v-model="item.value" :key="item.id" placeholder="请输入公告类型名称">
              <template #suffix>
                <el-icon class="el-input__icon del-icon" @click.stop="delOption(index)"><CloseBold /></el-icon>
              </template>
            </el-input>
            <div class="add-but">
              <el-button type="primary" @click="addoption" style="width: 60px;" size="default">添加</el-button>
              <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
                content="删除公告类型将会影响已绑定这些类型的公告，请谨慎处理"
              >
                <template #reference>
                  <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
                </template>
              </el-popover>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="公告模式选择">
          <el-radio-group v-model="system.noticePattern">
            <el-radio :label="'1'">经典模式</el-radio>
            <el-radio :label="'2'">简洁模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="公告是否允许导出">
          <el-switch v-model="biddingSetting.needLogin" />
        </el-form-item> -->
        <div class="fotter">
          <el-button type="primary" @click="FormSubmit" size="default">保存</el-button>
        </div>
      </el-form>

    </div>
    <!-- 图片上传  -->
    <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="true" :modelId="1" :limit="1" @getFileList="insertFiles" :isToJpg="true"></FilesUpload>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { 
  selectSystemSetting,
  updateSystemSetting
 } from '@/api/setting'
import { QuestionFilled, Plus, CloseBold } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { FilesUpload } from "@ruifox-cms/components"
import { generateUUID } from '@/utils/tools'

//获取基本设置信息
const system = ref()
const getSetting = async () => {
  const res = await selectSystemSetting()
  system.value = res.data;
  if (system.value.noticePattern == '') {
    system.value.noticePattern = '1'; // 设置默认值
  }

  if(!system.value.basicSettings){
    system.value.basicSettings ={
      systemName: "",
      officialWebsiteUrl: "",
      logoUrl: "",
      copyrightInfo: "",
      icpRecordNumber: "",
      icpRecordUrl: "",
      beianRecordNumber: "",
      beianRecordUrl: ""
    }
  }
  console.log("system.value",system.value);
  
}
getSetting()

//保存基本设置信息
const FormSubmit = async () => {
  // system.value.noticeType = JSON.stringify(system.value.noticeType )
  try {
    const res = await updateSystemSetting(system.value);
   if (res.code === 20000) {
      ElMessage.success("更新成功");
    }
  } catch (error) {
    ElMessage.warning("更新失败");
  } finally {
    getSetting()
  }
}

// 附件上传
const showFilesUpload = ref(false)
const resourceFormList = ref([])
const insertFiles = filesList => {
  resourceFormList.value = filesList.map(item => {
    return {
      resourceData: {
        title: item.name,
        url: item.url,
      },
      needUpload: item.needUpload,
      tagList: item.tagList || [],
    }
  })
  console.log("resourceFormList.value111",resourceFormList.value);
  // theFile.value = resourceFormList.value[0].resourceData.url
  system.value.basicSettings.logoUrl = resourceFormList.value[0].resourceData.url
  
}
// const theFile = ref(null)

const handleUpload = async () => { 
  showFilesUpload.value = true;
};

const handleRemoveImg = async () => { 
  system.value.basicSettings.logoUrl = ""
};
//公告模式添加
const addoption = async () => {
  system.value.noticeType.push({
    noticeTypeId: generateUUID(),
    value: ''
  })
}
const delOption = (index) => {
  console.log("删除");
  system.value.noticeType.splice(index, 1)
}
</script>

<style lang="scss" scoped>
  .setting-content{
    display: flex;
  }
  .setting-item{
    padding: 20px;
    margin-right: 20px;
    box-shadow: var(--card-hover-shadow, 1px 1px 4px 0 rgba(0, 0, 0, .13));
    height: max-content;
  }
  .setting-form{
    width: 500px;
    max-width: 98%;
    ::v-deep *{
      font-size: 14px;

    }
    ::v-deep svg{
      font-size: 16px;

    }
    .item-row{
      display: flex;
      align-items: center;
      span{
        margin-right: 10px;
        color: $black_2;
        font-size: 14px;
      }
      ::v-deep .el-radio{
        margin-right: 10px;
      }
    }
  }
  ::v-deep .el-radio{
    margin-right: 10px;
  }
  ::v-deep .el-input+.el-input{
    margin-top: 10px;
  }
  .fotter{
    display: flex;
    justify-content: end;
  }
  .form-img{
    height: 100px;
    width: 150px;
    border: 1px dashed $borderColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .has-img{
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        max-width: 100%;
        max-height: 100%;
      }
      span{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        background-color: $failColor;
        height: 20px;
        width: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover{
        span{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    } 
  }
  .notice-type{
    display: flex;
    flex-direction: column;
  }
  .add-but{
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .del-icon{
    cursor: pointer;
  }
</style>